import { useEffect, useState } from "react";
import useData from "../../hooks/useData";

const C = {
    1: "已开始",
    2: "已结束",
    3: "已完成"
}

function Bottom(props) {

    const { data, setData } = useData();
    const [user, setUser] = useState([]);
    // user 是有状态 
    const [name, setName] = useState('空名称');
    const [obj, setObject] = useState([
        {
            a: 1,
            name: "david"
        },
        {
            a: 2,
            name: "robin"
        }
    ])


    //无状态变量
    let result = []


    // const [data, setData] = useState([])

    useEffect(() => {

        getData();
        // fetch('/mock/user.json').then(use => use.json().then(use => {
        //     setUser(use)
        // }))
    }, [])

    useEffect(() => {

    }, [])

    const getData = () => {
        fetch('/mock/user.json').then(use => use.json().then(use => {
            setUser(use)
        }))
    }


    // 错误的用法 导致 组件无限渲染 ,组件未加载 设置状态,导致组件无限渲染
    // 必须在useEffect中设置状态，换言之，必须等组件加载完后，才能设置状态
    //  Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
    // setName("DVID");


    //生成dom的方法放到return 之前
    const renderData = () => {
        return data.map(i => {
            return <div>{i.name}</div>
        })
    }

    return (<div>
        <h1>{name}</h1>
        <div>bottom</div>
        <button onClick={getData}>点击请求</button>

        <ul>

            {
                obj.map(i => {
                    return <div>
                        <div>{i.name}</div>
                        <div>{C[i.a]}</div>
                    </div>
                })
            }

        </ul>
        <div>
            {
                user.map(i => {
                    return <div>
                        {i.name}
                        <div>{i.age}</div>
                    </div>
                })
            }
        </div>
        {
            renderData()
            // data.map(i => {
            //     return <div>{i.name}</div>
            // })
        }
        {/* {
            result.map(i => {
                return <div>{i.name}</div>
            })
        } */}
    </div>
    )
}

export default Bottom;